import React from 'react';
import {createMaterialBottomTabNavigator} from 'react-navigation-material-bottom-tabs';
import HomePage from "../pages/HomePage";
import CasePage from "../pages/CasePage";
import Icon from 'react-native-vector-icons/Ionicons';
import { Image } from 'react-native';
import PatternPage from "../pages/PatternPage";
import ProductPage from "../pages/ProductPage";
import UserPage from "../pages/UserPage";

let image1 = require('../assets/guide/home.png');
let image2 = require('../assets/guide/case.png');
let image3 = require('../assets/guide/pattern.png');
let image4 = require('../assets/guide/product.png');
let image5 = require('../assets/guide/user.png');

const Tabs = createMaterialBottomTabNavigator({

    Home: {screen: HomePage, navigationOptions: ({navigation}) => ({
            tabBarLabel:"首页",
            tabBarIcon: ({ tintColor }) => (
                <Icon color={tintColor} size={24}><Image source={image1} style={[{tintColor: tintColor}]}/></Icon>
            ),
        })},
    Case: {screen: CasePage, navigationOptions: ({navigation}) => ({
            tabBarLabel:"案例",
            tabBarIcon: ({ tintColor }) => (
                <Icon color={tintColor} size={24} ><Image source={image2} style={[{tintColor: tintColor}]}/></Icon>
            ),

        })},
    Pattern: {screen: PatternPage, navigationOptions: ({navigation}) => ({
            tabBarLabel:"图库",
            tabBarIcon: ({ tintColor }) => (
                <Icon color={tintColor} size={24} ><Image source={image3} style={[{tintColor: tintColor}]}/></Icon>
            ),

        })},
    Product: {screen: ProductPage, navigationOptions: ({navigation}) => ({
            tabBarLabel:"产品库",
            tabBarIcon: ({ tintColor }) => (
                <Icon color={tintColor} size={24} ><Image source={image4} style={[{tintColor: tintColor}]}/></Icon>
            ),

        })}
    ,
    User: {screen: UserPage, navigationOptions: ({navigation}) => ({
            tabBarLabel:"我",
            tabBarIcon: ({ tintColor }) => (
                <Icon color={tintColor} size={24} ><Image source={image5} style={[{tintColor: tintColor}]}/></Icon>
            ),

        })}




},{
    backBehavior:false,
    labeled:true,
    shifting:false,
    barStyle: { backgroundColor: '#fff' },
});


export default Tabs;